<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI 智能助手</title>
    
    <!-- Vue.js CDN -->
    <script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.min.js"></script>
    
    <!-- Element Plus CDN -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-plus@2.3.14/dist/index.css">
    <script src="https://cdn.jsdelivr.net/npm/element-plus@2.3.14/dist/index.full.min.js"></script>
    
    <!-- Highlight.js CDN (完整版包含所有语言) -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@11.8.0/styles/github-dark.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
    
    <!-- KaTeX CDN -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.css">
    <script src="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/contrib/auto-render.min.js"></script>
    
    <!-- DOMPurify CDN (安全处理HTML) -->
    <script src="https://cdn.jsdelivr.net/npm/dompurify@3.0.5/dist/purify.min.js"></script>
    
    <!-- Marked.js CDN (使用适配版本) -->
    <script src="https://cdn.jsdelivr.net/npm/marked@4.3.0/lib/marked.umd.min.js"></script>
    
    <!-- Axios CDN -->
    <script src="https://cdn.jsdelivr.net/npm/axios@1.5.0/dist/axios.min.js"></script>
    
    <!-- 自定义样式 -->
    <link rel="stylesheet" href="css/chat.css">
    
    <!-- 确保库已加载 -->
    <script>
        // 在加载应用前确保全局变量存在
        window.onload = function() {
            // 确保highlight.js全局可用
            if (typeof hljs === 'undefined' && window.hljs) {
                window.hljs = window.hljs;
            }
            
            // 确保marked全局可用
            if (typeof marked === 'undefined' && window.marked) {
                window.marked = window.marked;
            }
            
            // 确保KaTeX渲染函数可用
            if (typeof renderMathInElement === 'undefined' && window.katex) {
                window.renderMathInElement = window.katex.renderMathInElement;
            }
        };
    </script>
</head>
<body>
    <div id="app" class="container">
        <div class="chat-container">
            <div class="chat-header">
                <div>AI 智能助手</div>
                <div class="streaming-indicator" v-if="isStreaming">
                    <div class="dot-flashing"></div>思考中...
                </div>
            </div>
            <div class="chat-messages" ref="messagesContainer">
                <div v-for="(message, index) in messages" :key="index" :class="['message', message.role === 'user' ? 'message-user' : 'message-ai']">
                    <img v-if="message.role === 'ai'" class="avatar" src="https://img.icons8.com/color/48/000000/bot.png" alt="AI">
                    <div class="message-content">
                        <div v-if="message.role === 'user'">{{ message.content }}</div>
                        <div v-else class="markdown-content" v-html="parseMarkdown(message.content)"></div>
                    </div>
                    <img v-if="message.role === 'user'" class="avatar" src="https://img.icons8.com/color/48/000000/user.png" alt="User">
                </div>
            </div>
            <div class="chat-input-area">
                <el-select v-model="memoryId" placeholder="记忆ID" class="memory-id-select">
                    <el-option v-for="i in 10" :key="i" :label="`记忆 ${i}`" :value="i"></el-option>
                </el-select>
                <el-input
                    v-model="userInput"
                    placeholder="请输入您的问题..."
                    :disabled="isStreaming"
                    @keyup.enter="sendMessage"
                    clearable
                    class="flex-grow-1"
                    style="flex-grow: 1;"
                    type="textarea"
                    :autosize="{ minRows: 1, maxRows: 5 }"
                ></el-input>
                <el-button type="primary" @click="sendMessage" :loading="isStreaming" style="margin-left: 10px;">发送</el-button>
            </div>
        </div>
    </div>

    <!-- 自定义脚本 -->
    <script src="js/chat.js"></script>
</body>
</html> 